<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script>
    <script>
        $(function () {
           $("#name").blur(function () {
               var ctxPath = '[[@{/}]]';
               var url=ctxPath + "emp/name/" + this.value;
                $.get(url,null,function (response) {
                    if(response.count > 0){
                        $("#checkResult").css("color","red").html("用户名不可用")
                    }else {
                        $("#checkResult").css("color","green").html("用户名可用")
                    }
                });
           });
        });
    </script>
</head>
<body>

    <form th:action="@{/emp}" th:object="${emp}" method="post">
        <h1 th:if="${emp.id == null}">新增员工</h1>
            <div th:if="${emp.id != null}">
                <h1 >修改员工</h1>
                <input type="hidden" th:field="*{id}">
                <!--表单提交方式转换参数-->
                <input type="hidden" name="_method" value="PUT">
            </div>
        <p>
            姓名：<input type="text" th:field="*{name}">
                <span id="checkResult"></span>
        </p>
        <p>
            性别：
            <input type="radio" th:field="*{sex}" value="M">男
            <input type="radio" th:field="*{sex}" value="F">女
        </p>
        <p>
            年龄：<input type="text" th:field="*{age}">
        </p>
        <p>
            生日：<input type="text" th:field="*{birthday}">
        </p>
        <p>
            证件类型：
            <select th:field="*{idType}">
                <option value="-">请选择</option>
                <option value="1">身份证</option>
                <option value="2">学生证</option>
                <option value="3">港澳通行证</option>
                <option value="4">其他</option>
            </select>
        </p>
        <button>保存</button>
    </form>
</body>
</html>